<template>
  <div class="dashboard-container">
    <el-row>
      <!--左侧-->
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <!--用户信息-->
          <div class="user-info">
            <el-card class="box-card">
              <div class="userInfo">
                <img src="@/assets/images/user1.png" alt="">
                <div class="userRight">
                  <p><span style="font-size: 13px;color: #909399">姓名：</span>{{ userInfo.name }}</p>
                  <p><span style="font-size: 13px;color: #909399">角色：</span>{{ userInfo.roleName }}</p>
                  <p><span style="font-size: 13px;color: #909399;">角色代码：</span>
                    <el-tag type="mini">{{ userInfo.roleCode }}</el-tag>
                  </p>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </el-col>
      <!--右侧-->
      <el-col :span="16">
        <div class="grid-content bg-purple-light">
          <div class="detail-top">
            <el-card class="box-card" v-for="(item,index) in countData" :key="index"
                     :body-style="{display:'flex',padding:0}"
                     style="margin-right: 30px;height:80px;margin-bottom: 20px;width: 30%">
              <div class="detail-left" :style="`background-color:${item.color}`">
                <i class="icon" :class="`el-icon-${item.icon}`"></i>
              </div>
              <div class="detail-right">
                <div class="title">{{ item.name }} <i class="icon" :class="`el-icon-${item.titleIcon}`"
                                                      :style="`color:${item.color}`"></i></div>
                <div class="money">{{ item.value }}</div>
              </div>
            </el-card>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <div ref="pieChart" style="width: 90%; height: 400px; margin: auto;"></div>
      </el-col>
      <el-col :span="12">
        <div ref="barChart" style="width: 90%; height: 400px; margin: auto;"></div>
      </el-col>
    </el-row>

    <el-row>
      <div ref="lineChart" style="width: 100%; height: 400px;"></div>
    </el-row>

  </div>
</template>

<script>
import {mapState} from "vuex";
import * as echarts from 'echarts';

export default {
  name: 'Dashboard',
  data() {
    return {
      tableData: [],
      chartInstance: null,
      salesData: [],
      tableLabel: {
        type: '商品分类',
        todayBuy: '今日销量',
        monthBuy: '月销量',
        totalBuy: '总销量'
      },
      countData: [
        {
          name: "本日订单数",
          value: 0,
          icon: "s-order",
          color: "#409EFF",
          titleIcon: "sunny",
        },
        {
          name: "本日销售额",
          value: 0,
          icon: "s-data",
          color: "#67C23A",
          titleIcon: "sunny",
        },
        {
          name: "本日新增商品数",
          value: 0,
          icon: "goods",
          color: "#F56C6C",
          titleIcon: "sunny",
        },
        {
          name: "本月订单数",
          value: 0,
          icon: "s-order",
          color: "#409EFF",
          titleIcon: "finished",
        },
        {
          name: "本月销售额",
          value: 0,
          icon: "s-data",
          color: "#67C23A",
          titleIcon: "finished",
        },
        {
          name: "本月新增商品数",
          value: 0,
          icon: "goods",
          color: "#F56C6C",
          titleIcon: "finished",
        },
      ],
      userData: [],

      dailyOrder: '',
      salesToday: '',
      todayNewProduct: '',
      monthOrder: '',
      salesMonth: '',
      monthNewProduct: '',

      // 折线图数据
      lineChartData: {
        weekDay: [],
        orderCount: []
      },
      // 饼图数据
      pieChartData: [],
      barChartData: {
        monthName: [],
        orderCount: []
      }
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  mounted() {
    this.getCategoryHandler();
    this.getMonthlyDealHandler();
    this.getWeeklyDealHandler();
    this.getCountDataHandle();
  },
  methods: {
    getCountDataHandle() {
      this.$api.stat.getCountData().then(res => {
        this.countData[0].value = res.result.dailyOrder
        this.countData[1].value = res.result.salesToday
        this.countData[2].value = res.result.todayNewProductsCount
        this.countData[3].value = res.result.monthOrder
        this.countData[4].value = res.result.salesMonth
        this.countData[5].value = res.result.monthNewProductsCount
      })
    },
    getCategoryHandler() {
      this.$api.stat.getCategoryData().then(res => {
        this.pieChartData = res.result

        this.$nextTick(() => {
          this.initPieChart();
        });
      })
    },
    getMonthlyDealHandler() {
      this.$api.stat.getMonthlyDeal().then(res => {
        this.barChartData.monthName = res.result.map(item => item.monthName);
        this.barChartData.orderCount = res.result.map(item => item.orderCount);
        this.$nextTick(() => {
          this.initBarChart();
        });
      })
    },
    getWeeklyDealHandler() {
      this.$api.stat.getWeeklyDeal().then(res => {
        this.lineChartData.weekDay = res.result.map(item => item.weekDay);
        this.lineChartData.orderCount = res.result.map(item => item.orderCount);
        this.$nextTick(() => {
          this.initLineChart();
        });
      })
    },
    initLineChart() {
      const chart = echarts.init(this.$refs.lineChart);
      const option = {
        title: {
          text: '每周交易量'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: this.lineChartData.weekDay
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.lineChartData.orderCount,
          type: 'line'
        }]
      };
      chart.setOption(option);
    },
    initPieChart() {
      const chart = echarts.init(this.$refs.pieChart);
      const option = {
        title: {
          text: '二手商品类别分布',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '商品类别',
            type: 'pie',
            radius: '50%',
            data: this.pieChartData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      chart.setOption(option);
    },
    initBarChart() {
      const chart = echarts.init(this.$refs.barChart);
      const option = {
        title: {
          text: '各月份交易量'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: this.barChartData.monthName,
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.barChartData.orderCount,
          type: 'bar',
          itemStyle: {
            barWidth: '30%' // 设置柱子宽度
          }
        }]
      };
      chart.setOption(option);
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.user-info {
  .userInfo {
    height: 140px;
    display: flex;
    align-items: center;
    padding: 10px;

    img {
      height: 150px;
      width: 150px;
    }

    .userRight {
      margin-left: 40px;
    }
  }

  .loginInfo {
    padding: 10px;
    line-height: 20px;

    p {
      margin-top: 5px;

      span {
        margin-left: 50px;
      }
    }
  }
}

.detail-top {
  display: flex;
  flex-wrap: wrap;
  margin-left: 20px;

  .detail-left {
    width: 80px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    font-size: 30px;
  }

  .detail-right {
    margin-left: 20px;
    display: flex;
    height: 80px;
    flex-direction: column;

    .title {
      margin-top: 10px;
      height: 30px;

      font-size: 15px;
    }

    .money {
      height: 30px;

      font-size: 25px;
    }
  }
}

.graph {
  margin-left: 20px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;

  .el-card {
    width: 100%;
    height: auto;
  }
}
</style>
